<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户信息" name="first"></el-tab-pane>
        <el-tab-pane label="设备信息" name="second"></el-tab-pane>
        <el-tab-pane label="我的亲属" name="third"></el-tab-pane>
      </el-tabs>
    </el-card>
    <div v-if="name == 'first'" style="margin-top: 24px">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12" :lg="8">
          <el-card class="box-card" style="padding-bottom: 114px">
            <div slot="header" class="clearfix">
              <span style="font-size: 14px; color: #0091FF;">个人信息</span>
              <span style="float: right; padding: 3px 0; color: rgba(153, 153, 153, 1); font-size: 14px;"
                type="text">{{ userarr.createdTime }}</span>
            </div>
            <div style="border-bottom: 1px solid #F0F0F0; padding-bottom: 10px">
              <img style="display: block; width: 100px; margin: 0 auto;" :src=touxingimg />
            </div>
            <div class="box">
              <span style="padding: 10px 13px">手机号码：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.uphone }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">证件号码：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.card }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">姓 名：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.uname }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">出生日期：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.birthData }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">年 龄：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.age }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">性 别：</span>
              <span v-if="userarr.sex == 0" style="padding: 10px 13px; margin-top: 4px">男</span>
              <span v-if="userarr.sex == 1" style="padding: 10px 13px; margin-top: 4px">女</span>
              <span v-if="userarr.sex == 2" style="padding: 10px 13px; margin-top: 4px">未知</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">身 高：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.height }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">体 重：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.weight }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">户籍属地：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.address }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">健康顾问：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.healthAdvisorName }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-size: 14px; color: #0091FF;">就医状况</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">最 近 就 医：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.medicalName }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">就 医 原 因：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.medicalReasonsName }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">最近服用药：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.recentMedication }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">服 药 频 率：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.drugFrequencyName }}</span>
            </div>
          </el-card>
          <el-card class="box-card" style="margin-top: 24px">
            <div slot="header" class="clearfix">
              <span style="font-size: 14px; color: #0091FF;">常用药物</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">过敏史：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.allergicHistory }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">药物类别：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.drugCategoryName }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px"></span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.drugName }}</span>
            </div>
            <div class="box" v-for="(item,index) in yaopinimg" :key="index">
              <img v-if="item.fastdfsUrl" style="width: 80px; margin-right: 30px" :src="item.fastdfsUrl" />
            </div>
          </el-card>
          <el-card class="box-card" style="margin-top: 24px">
            <div slot="header" class="clearfix">
              <span style="font-size: 14px; color: #0091FF;">紧急联系人</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">姓 名：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.relativesName }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">手机号码：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.relativesPhone }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">关 系：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.relationshipName }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-size: 14px; color: #0091FF;">地址管理</span>
            </div>
            <div class="box" v-for="(item,index) in addarr" :key="index">
              <span style="padding: 10px 13px">{{ item.name }}</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ item.mobile }}</span>
              <span
                style="padding: 10px 13px; margin-top: 4px">{{ item.addressOneStr }}{{ item.addressTwoStr }}{{ item.addressThreeStr }}{{ item.addressFourStr }}{{ item.addressDetail }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div v-if="name == 'second'" style="margin-top: 24px;">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-card class="box-card" style="padding-bottom: 88px">
            <div slot="header" class="clearfix">
              <span style="font-size: 14px; color: #0091FF;">当前设备信息</span>
              <span v-if="lishiarr[0]"
                style="float: right; padding: 3px 0; color: rgba(153, 153, 153, 1); font-size: 14px;"
                type="text">{{ lishiarr[0].createTime }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">名称:</span>
              <span v-if="lishiarr[0]" style="padding: 10px 13px;">{{ lishiarr[0].nickName }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">型号:</span>
              <span v-if="lishiarr[0]" style="padding: 10px 13px; margin-top: 4px"> {{ lishiarr[0].equipmentModel }}
              </span>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-card class="box-card" style="padding-bottom: 2px">
            <div slot="header" class="clearfix">
              <span style="font-size: 14px; color: #0091FF;">运动数据</span>
              <span style="float: right; padding: 3px 0; color: rgba(153, 153, 153, 1); font-size: 14px;"
                type="text">2022-04-30 12:22:40</span>
            </div>
            <div class="box" style="height: 56px; align-items: center;">
              <div>
                <img style="width: 22px; height: 22px; margin-right: 10px" src="../../../assets/images/xinlv.png" />
                <span style="padding: 10px 0; font-size: 14px; color: rgba(0, 0, 0, 0.8)">心率：</span>
                <span style="padding: 10px 0; margin-top: 4px; font-size: 22px;">{{ yundongarr.xinlv }}<span
                    style="font-size: 14px; color: rgba(0, 0, 0, 0.8)">次/分</span></span>
              </div>
              <div>
                <img style="width: 22px; height: 22px; margin-right: 10px" src="../../../assets/images/xueya.png" />
                <span style="padding: 10px 0; font-size: 14px; color: rgba(0, 0, 0, 0.8)">血压：</span>
                <span
                  style="padding: 10px 0; margin-top: 4px; font-size: 22px;">{{ yundongarr.shuzhangya }}/{{ yundongarr.shousuoya }}<span
                    style="font-size: 14px; color: rgba(0, 0, 0, 0.8)">mmgh</span></span>
              </div>
              <div>
                <img style="width: 22px; height: 22px; margin-right: 10px" src="../../../assets/images/shuimian.png" />
                <span style="padding: 10px 0; font-size: 14px; color: rgba(0, 0, 0, 0.8)">睡眠：</span>
                <span style="padding: 10px 0; margin-top: 4px; font-size: 22px;">{{ shuimian }}<span
                    style="font-size: 14px; color: rgba(0, 0, 0, 0.8)">小时</span></span>
              </div>
            </div>
            <div class="box" style="height: 56px; align-items: center;">
              <div>
                <img style="width: 22px; height: 22px; margin-right: 10px" src="../../../assets/images/bushu.png" />
                <span style="padding: 10px 0; font-size: 14px; color: rgba(0, 0, 0, 0.8)">步数：</span>
                <span style="padding: 10px 0; margin-top: 4px; font-size: 22px;">{{ yundongarr.step }}<span
                    style="font-size: 14px; color: rgba(0, 0, 0, 0.8)">步</span></span>
              </div>
              <div>
                <img style="width: 22px; height: 22px; margin-right: 10px" src="../../../assets/images/reliang.png" />
                <span style="padding: 10px 0; font-size: 14px; color: rgba(0, 0, 0, 0.8)">热量：</span>
                <span style="padding: 10px 0; margin-top: 4px; font-size: 22px;">{{ yundongarr.kcal }}<span
                    style="font-size: 14px; color: rgba(0, 0, 0, 0.8)">千卡</span></span>
              </div>
              <div>
                <img style="width: 22px; height: 22px; margin-right: 10px" src="../../../assets/images/juli.png" />
                <span style="padding: 10px 0; font-size: 14px; color: rgba(0, 0, 0, 0.8)">距离：</span>
                <span style="padding: 10px 0; margin-top: 4px; font-size: 22px;">{{ yundongarr.juli }}<span
                    style="font-size: 14px; color: rgba(0, 0, 0, 0.8)">公里</span></span>
              </div>
            </div>
            <div class="box" style="height: 56px; align-items: center;">
              <div>
                <img style="width: 22px; height: 22px; margin-right: 10px" src="../../../assets/images/xueyang.png" />
                <span style="padding: 10px 0; font-size: 14px; color: rgba(0, 0, 0, 0.8)">血氧：</span>
                <span style="padding: 10px 0; margin-top: 4px; font-size: 22px;">{{ yundongarr.xueyang }}<span
                    style="font-size: 14px; color: rgba(0, 0, 0, 0.8)">%</span></span>
              </div>
              <span style="font-size: 14px; color: #1890FF; margin-top: 10px; cursor: pointer"
                @click="quanbu">查看全部>></span>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 24px">
        <el-col :xs="24" :sm="24" :md="12" :lg="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-size: 14px; color: #0091FF;">历史换绑设备信息</span>
            </div>
            <el-table :data="lishiarr">
              <el-table-column label="设备编号" align="center" prop="id" />
              <el-table-column label="型号" align="center" prop="equipmentModel" show-overflow-tooltip />
              <el-table-column label="货号" align="center" prop="equipmentArticle" />
              <el-table-column label="绑定时间" align="center" prop="createTime" show-overflow-tooltip />
              <el-table-column label="解绑时间" align="center" prop="relieveTime" />
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div v-if="name == 'third'" style="margin-top: 24px">
      <el-row :gutter="20" style="margin-top: 24px">
        <el-col :xs="24" :sm="24" :md="12" :lg="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-size: 14px;">我的亲属</span>
            </div>
            <el-table :data="qinshuarr">
              <el-table-column label="姓名" align="center" prop="relativesName" show-overflow-tooltip />
              <el-table-column label="手机号码" align="center" prop="relativesPhone" />
              <el-table-column label="关系 " align="center" prop="relationshipName" show-overflow-tooltip />
              <el-table-column label="时间" align="center" prop="createdTime" />
              <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
                min-width="250">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="handleqinshudet(scope.row)"
                    v-hasPermi="['system:miniuser:edit']">详情</el-button>
                </template>
              </el-table-column> -->
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {
    getMiniuser,
    getuseraddres,
    userimg,
    useryaopinimg,
    getuserlishi,
    useryundong,
    userqinshu
  } from "@/api/system/miniuser";
  // let id = 0;
  export default {
    name: "Laborer",
    data() {
      return {
        activeName: 'first',
        name: '',
        id: '',
        userarr: {},
        addarr: [],
        uphone: '',
        touxingimg: '',
        yaopinimg: [],
        lishiarr: [],
        yundongarr: {},
        qinshuarr: [],
        total: '',
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        juli: '',
        shuimian: ''
      };
    },
    created() {
      this.id = this.$route.query.id
      this.uphone = this.$route.query.uphone
      this.getdet()
      this.getaddres()
      this.getuserimg()
      this.gettaopinimg()
      this.getlishi()
      this.getqinshu()
      // console.log(this.activeName);
      this.name = this.activeName
    },
    methods: {
      // 详情
      getdet() {
        let parse = {
          uphone: this.uphone
        }
        getMiniuser(parse).then(response => {
          if (response.data.length > 0) {
            this.userarr = response.data[0];
          }
          // console.log(this.userarr)
        });
      },
      // 查询地址管理
      getaddres() {
        let parse = {
          userId: this.id
        }
        getuseraddres(parse).then(response => {
          // console.log(response)
          this.addarr = response.rows;
        });
      },
      // 获取头像
      getuserimg() {
        let parse = {
          userId: this.uphone
        }
        userimg(parse).then(response => {
          // console.log(response)
          if(response.data.fastdfsUrl){
            this.touxingimg = response.data.fastdfsUrl;
          }
        });
      },
      // 药品图片
      gettaopinimg() {
        let parse = {
          userId: this.uphone
        }
        useryaopinimg(parse).then(response => {
          this.yaopinimg = response.data;
        });
      },
      // 获取历史绑定设备信息
      getlishi() {
        let parse = {
          uphone: this.uphone
        }
        getuserlishi(parse).then(response => {
          this.lishiarr = response.rows;
          this.getyundong()
        });
      },
      // 获取用户运动数据
      getyundong() {
        if (this.lishiarr.length === 0) return
        let parse = {
          deviceId: this.lishiarr[0].deviceId
        }
        useryundong(parse).then(response => {
          // console.log(response)
          // console.log(this.userarr.height  * 0.415 / 100)
          this.yundongarr = response.data;
          if(this.userarr.height){
            let buchang = this.userarr.height * 0.415 / 100
            if(this.yundongarr.step) {
              this.yundongarr.juli = (buchang * this.yundongarr.step / 1000).toFixed(2)
            } else {
              this.yundongarr.juli = 0
            }
          }
          if(response.data.deephoue && response.data.shallowhoue && response.data.deepminute && response.data.shallowminute){
            if (response.data.deephoue == 0 && response.data.deepminute == 0 && response.data.shallowhoue == 0 &&
              response.data.shallowminute == 0) {
              this.shuimian = 0
            } else {
              let h = response.data.deephoue * 60 + response.data.shallowhoue * 60
              let m = response.data.deepminute + response.data.shallowminute
              let s = h + m
              this.shuimian = s / 60
            }
          } else {
            this.shuimian = 0
          }
        });
      },
      // 获取亲属
      getqinshu() {
        let parse = {
          uphone: this.uphone
        }
        userqinshu(parse).then(response => {
          // console.log(response)
          this.qinshuarr = response.data;
          // this.total = response.total
        });
      },
      // 亲属详情
      handleqinshudet(row) {
        // console.log(row.id)
        this.$router.push({
          path: '/qinshudet',
          query: {
            id: row.id,
            uphone: row.uphone
          }
        })
      },
      // 查看全部跳转
      quanbu() {
        this.$router.push({
          path: '/motion',
          query: {
            uphone: this.uphone
          }
        })
      },
      // tab切换
      handleClick() {
        // console.log(this.activeName);
        this.name = this.activeName
        // console.log(this.name)
      }
    }
  };
</script>
<style scoped>
  .box {
    border-bottom: 1px solid #F0F0F0;
    padding: 10px 0 10opx 0;
    display: flex;
    justify-content: space-between;
  }
</style>
